# 云胡的编程周报第 009 期

时间：2023/10/9 - 2023/10/15

# 一、点滴记录

# 1

Windows 系统查看当前桌面已打开的窗口快捷键：win + tab。

# 2

在 vim中搜索关键字，先按 ESC，然后输入正斜杠 /，再输入想要搜索的关键字，然后回车。小写 n 往后查找下一个，大写N 往前。

# 3

在 linux 中用 find查找文件或文件夹

find / -name nginx

# 4

在编写文件路径的时候，用 File.separator做路径的分隔符，在 Windows 系统上，File.separator为反斜杠 \，在 Linux 和 macOS上为正斜杠 /。

# 5

运行 Spring Boot 项目时有时候会出现端口已经占用，用 netstat -aon|findstr "8080" 找到进程 id后，用 taskkill /pid 29804 -f 强制关闭进程，29804 是一个举例的进程 id。

# 6

实体类

public class AppGameEntity {
    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;

    @ApiModelProperty(value = "分数")
    private Integer score;

    @ApiModelProperty(value = "昵称")
    private String name;

    @ApiModelProperty(value = "排名")
    private Integer rankId;

    @ApiModelProperty(value = "用时")
    private Integer useTime;

    @JsonFormat(pattern  = "yyyy-MM-dd HH:mm:ss")
    @TableField("create_time")
    private LocalDateTime createTime;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

@Test
void test() {
    QueryWrapper <AppGameEntity> queryWrapper = new QueryWrapper <> ();
    queryWrapper.lambda()
        .orderByDesc(AppGameEntity::getScore);
    List <AppGameEntity> res = appGameMapper.selectList(queryWrapper);
  	List<Integer> scoreList = res.stream().map(AppGameEntity::getScore).collect(Collectors.toList());
  	System.out.println(scoreList);
}

1
2
3
4
5
6
7
8
9

此时生成的是包含所有字段的实体类 List，如果我们只单单想要分数，又不想写 for 循环一个一个遍历获取呢？我们需要借助 stream 流的 map将原来的每一个实体类转为分数，然后再将这个流中的所有元素转为 List。

List<Integer> scoreList = res.stream().map(AppGameEntity::getScore).collect(Collectors.toList());

结果就是：

[33732, 31976, 30812, 30512 ······]

# 7

使用 Navicat转储一整个数据库时，需要在新库的地方新建数据库，转储表的时候不用，很小的细节，没注意会一直出错。

# 8

在做 2048 排行榜的时候，不知道为啥一直无法插入数据，提示 sql 语法错误，后面才发现表名是 rank, 而它是 mysql 的一个关键字，晕死，更改表名后即可插入成功。

# 9

Vue 中 v-if 和 v-show 的区别

v-if不为真的 dom 不会渲染，完全没有。
v-show会把不为真的 dom 一块渲染，只是不显示到页面上。

v-if 有更高的切换消耗，v-show 有更高的初始渲染消耗，频繁切换的话用 v-show 好。

# 10

Vue 实现移动端上下左右滑动在 dom 上添加触摸事件

<div id="grid-container"
      @touchstart="touchStart()"
      @touchend="touchEnd()">

1
2
3

开始触摸屏幕时，获取当前触摸点的位置，触摸结束时，获取触摸结束点的位置。然后根据这两个点的位置判断是上下左右哪个滑动。

/**
 * 开始触摸屏幕
 */
let startX = ref();
let startY = ref();

function touchStart() {
  // 阻止默认事件（长按的时候出现复制）
  event.preventDefault();
  startX.value = event.changedTouches[0].pageX;
  startY.value = event.changedTouches[0].pageY;
}

/**
 * 触摸结束
 */
function touchEnd() {
  event.preventDefault();

  let moveEndX = event.changedTouches[0].pageX;
  let moveEndY = event.changedTouches[0].pageY;
  let X = moveEndX - startX.value;
  let Y = moveEndY - startY.value;

  if (Math.abs(X) > Math.abs(Y) && X > 0) {
    ElMessage.success("向右滑动");
  } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
    ElMessage.success("向左滑动");
  } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
    ElMessage.success("向下滑动");
  } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
    ElMessage.success("向上滑动");
  }
}